import {
  ProCard,
  ProFormSelect,
  ProFormText,
  StepsForm,
  ProFormDependency,
  ProFormList,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Button, message, Card, Upload } from 'antd';
import React, { useState } from 'react';
import { connect } from 'umi';

const modules = {
  toolbar: {
    container: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ header: 1 }, { header: 2 }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ direction: 'rtl' }],
      [{ size: ['small', false, 'large', 'huge'] }], //字体设置
      [
        {
          color: [],
        },
      ],
      [
        {
          background: [],
        },
      ],
      [{ font: [] }],
      [{ align: [] }],
      ['link', 'image'], // a链接和图片的显示
    ],
  },
};
const NewMessage: React.FC = (props: any) => {
  const [messageValue, setMessageValue] = useState('');
  const [flag, setFlag] = useState(true)
  const [optipnSelect, setOptionSelect] = useState([
    { value: '1', label: '电气工程及其自动化' },
    { value: '2', label: '新能源科学与工程' },
  ])
  const valueSelectList = [{}]
  const getOptions = (vales: any) => {
    if (flag) {
      if (props.dispatch) {
        //console.log("预览分群")
        props.dispatch({
          //路径：model的namespace+effects函数名
          type: 'Model_Counsellor/getOptionsEffects',
          payload: {
            callback: (value: any) => {
              if (vales == "1")
                selectValue(value.majorLabel)
              else if (vales == "2")
                selectValue(value.classLabel)
              else if (vales == "0")
                selectValue(value.enrollment)
              else if (vales == "3")
                selectClusterValue(value.cluster)
            },
          },
        });
      }
    }
    setFlag(false)
  }
  const selectValue = (values: any) => {
    let i = 0
    values.forEach(item => {
      let selectGroup = {
        value: item,
        label: item

      }
      i++
      valueSelectList.push(selectGroup)
    })
    console.log(valueSelectList)
    valueSelectList.splice(0, 1)
    setOptionSelect(valueSelectList)
  }
  const selectClusterValue = (values: any) => {
    let i = 0
    values.forEach(item => {
      let selectGroup = {
        value: item.clusterId,
        label: item.clusterLabel

      }
      i++
      valueSelectList.push(selectGroup)
    })
    console.log(valueSelectList)
    valueSelectList.splice(0, 1)
    setOptionSelect(valueSelectList)
  }
  return (
    <ProCard>
      <StepsForm<{
        name: string;
      }>
        onFinish={async (values) => {
          console.log(values);
          console.log(messageValue)
          if (messageValue == '') message.error("请输入通知内容")
          else if (props.dispatch) {
            console.log("新建通知")
            props.dispatch({
              //路径：model的namespace+effects函数名
              type: 'Model_Counsellor/setNewMessageEffects',
              payload: {
                value: values,
                content: messageValue,
                teacherCode: localStorage.getItem('userAccount'),
              },
            });
          }
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
        submitter={{
          render: (props) => {
            if (props.step === 0) {
              return (
                <Button type="primary" onClick={() => props.onSubmit?.()}>
                  下一步 {'>'}
                </Button>
              );
            }

            if (props.step === 1) {
              return [
                <Button key="pre" onClick={() => props.onPre?.()}>
                  返回上一步
                </Button>,
                <Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
                  下一步 {'>'}
                </Button>,
              ];
            }

            return [
              <Button key="gotoTwo" onClick={() => props.onPre?.()}>
                {'<'} 返回上一步
              </Button>,
              <Button type="primary" key="goToTree" onClick={() => { props.onSubmit?.() }}>
                提交 √
              </Button>,
            ];
          },
        }}
      >
        <StepsForm.StepForm<{
          name: string;
        }>
          name="base"
          title="新建通知"
          onFinish={async ({ name }) => {
            return true;
          }}
        >
          <Card title="通知名称" bordered={false} style={{ width: 600 }}>
            <ProFormText
              name="messageName"
              label=" "
              width="md"
              tooltip="最长为 24 位，用于标定的唯一 id"
              placeholder="请输入名称"
              rules={[{ required: true }]}
            />
          </Card>
          <Card title="通知内容" bordered={false} style={{ width: 600 }} >
            <ReactQuill theme="snow" value={messageValue} onChange={setMessageValue} modules={modules} />
          </Card>

        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="checkbox"
          title="选择通知对象"
        >
          <Card title="对象范围" bordered={false} style={{ width: 600 }}>
            <ProFormSelect
              name={['number']}
              label=" "
              width="lg"
              tooltip="必选"
              rules={[
                {
                  required: true,
                },
              ]}
              onChange={() => { setFlag(true) }}
              options={
                [{ value: '1', label: '专业' },
                { value: '0', label: '年级' },
                { value: '2', label: '班级' },
                { value: '3', label: '自定义分群' },]
              }
            />
          </Card>
          <ProFormDependency name={[['number']]}>
            {({ number }) => {
              if (
                number == '1'
              ) {
                getOptions(number)
                return (
                  <Card title="专业" bordered={false} style={{ width: 600 }}>
                    <ProFormSelect
                      mode="multiple"
                      width="lg"
                      name='label'
                      rules={[{ required: true, message: '请选择专业' }]}
                      tooltip="必选"
                      label=" "
                      options={optipnSelect}
                      placeholder="请选择专业"
                    />
                  </Card>

                );
              } else if (
                number == '0'
              ) {
                getOptions(number)
                return (
                  <Card title="年级" bordered={false} style={{ width: 600 }}>
                    <ProFormSelect
                      mode="multiple"
                      width="lg"
                      name='label'
                      rules={[{ required: true, message: '请选择年级' }]}
                      tooltip="必选"
                      label=" "
                      options={optipnSelect}
                      placeholder="请选择年级"
                    />
                  </Card>
                );
              } else if (
                number == '2'
              ) {
                getOptions(number)
                return (
                  <Card title="班级" bordered={false} style={{ width: 600 }}>
                    <ProFormSelect
                      mode="multiple"
                      width="lg"
                      name='label'
                      rules={[{ required: true, message: '请选择班级' }]}
                      tooltip="必选"
                      label=" "
                      options={optipnSelect}
                      placeholder="请选择班级"
                    />
                  </Card>
                );
              } else if (
                number == '3'
              ) {
                getOptions(number)
                return (
                  <Card title="自定义分群" bordered={false} style={{ width: 600 }}>
                    <ProFormSelect
                      width="lg"
                      name='label'
                      rules={[{ required: true, message: '请选择自定义分群' }]}
                      tooltip="必选"
                      label=" "
                      options={optipnSelect}
                      placeholder="请选择自定义分群"
                    />
                  </Card>
                );
              }
            }}
          </ProFormDependency>
        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          another: string;
        }> name="another" title="附件/自定义表单设置">
          <Card title="学生回执是否上传文件" bordered={false} style={{ width: 600 }}>
            <ProFormSelect
              width="lg"
              name='isFile'
              rules={[{ required: true, message: '请选择是否需要学生上传文件' }]}
              tooltip="必选"
              label=" "
              options={[
                { value: '0', label: '否' },
                { value: '1', label: '是' },
              ]}
              placeholder="请选择学生回执是否上传文件"
            />
          </Card>
          <Card title="自定义模式选择（如不需要，可不选择）" bordered={false} style={{ width: 600 }}>
            <ProFormSelect
              name={['selfSelect']}
              //label="自定义模式选择（仅支持选择一种）"
              width="lg"
              options={[{ value: '0', label: '输入框' },
              { value: '1', label: '单选框' },]}
            />
          </Card>
          <ProFormDependency name={[['selfSelect']]}>
            {({ selfSelect }) => {
              if (
                selfSelect == '0'
              ) {
                return (
                  <Card title="输入框" bordered={false} style={{ width: 600 }}>
                    <ProFormText
                      name="name"
                      label="输入框名称"
                      width="lg"
                      placeholder="请输入名称"
                      rules={[{ required: true }]}
                    />
                  </Card>

                );
              } else if (
                selfSelect == '1'
              ) {
                return (
                  <Card title="选项（请勿保留空选项）" bordered={false} style={{ width: 600 }}>
                    <ProFormText
                      name="name"
                      label="选项名称"
                      width="lg"
                      placeholder="请输入名称"
                      rules={[{ required: true }]}
                    />
                    <ProFormList
                      name="option"
                      initialValue={[
                        {
                          useMode: 'chapter',
                        },
                      ]}
                      creatorButtonProps={{
                        position: 'bottom',
                        creatorButtonText: '新增选项',
                      }}
                      creatorRecord={{
                        useMode: 'none',
                      }}
                    >
                      <ProFormText
                        key="optionName"
                        name="optionName"
                        label="选项"
                        width="lg"
                        placeholder="请输入选项"
                        rules={[{ required: true }]}
                      />
                    </ProFormList>
                  </Card>
                );
              }
            }}
          </ProFormDependency>
          <Card title="附件（如不需要，可不上传附件）" bordered={false} style={{ width: 600 }}>
            <ProFormUploadButton  fieldProps={{beforeUpload: (e) => {
                return false
              }}} label="" name="upload" max={1} action='upload.do' />
            {/* <Upload {...downLoadProps} maxCount={1}>
              <Button icon={<UploadOutlined />}>上传附件2023</Button>
            </Upload> */}
          </Card>
        </StepsForm.StepForm>
      </StepsForm>
    </ProCard >
  );
};
export default connect(({ Model_Counsellor }: any) => ({
  Model_Counsellor,
}))(NewMessage);
